<canvas width="600" height="400" id="myCanvas" style="border: 1px solid #ccc"></canvas>
<script>

    var Vector2 = function(x,y) {
        this.x = x
        this.y = y
    }

    Vector2.prototype={
        sub: function (b) { return new Vector2(this.x - b.x, this.y - b.y) },
        add: function (b) { return new Vector2(this.x + b.x, this.y + b.y) },
        subSelf: function (a) { this.x -= a.x; this.y -= a.y; return this },
        setLength: function (a) { return this.normalize().multiplyScalar(a) },
        multiplyScalar: function (a) { this.x *= a; this.y *= a; return this },
        normalize: function () { return this.divideScalar(this.length()) },
        divideScalar: function (a) { if (a) { this.x /= a; this.y /= a } else this.set(0, 0); return this },
        lengthSq: function () { return this.x * this.x + this.y * this.y },
        length: function () { return Math.sqrt(this.lengthSq()) }
    }

    var Joint = function (segLength, segCount, isFixed, startPoint) {
        this.segLength = segLength
        this.segCount = segCount
        this.isFixed = isFixed
        this.startPoint = startPoint
        this.points = []
        for (var i = 0; i < this.segCount; i++) {
            this.points.push(new Vector2(this.startPoint.x, this.startPoint.y + i * this.segLength))
        }
    }

    Joint.prototype.updatePointsPosition = function (point, index) {
        var tempV = this.points[index - 1].sub(point).setLength(this.segLength)
        this.points[index - 1] = point.add(tempV)
        if (index > 1) {
            this.updatePointsPosition(this.points[index - 1], index - 1)
        } else {
            if (this.isFixed) {
                var v = this.points[0].sub(this.startPoint)
                for (var i = 0; i < this.points.length; i++) {
                    this.points[i].subSelf(v)
                }
            }
        }
    }

    var joint = new Joint(2, 140, false, new Vector2(200, 100)),
        canvas = document.getElementById("myCanvas"),
        ctx = canvas.getContext('2d')


    function drawJoint(b) {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.lineWidth = 4


        for (var a = 0; a < b.points.length - 1; a++) {
            ctx.beginPath()
            ctx.lineJoin = "round"
            ctx.lineCap="round"
            if (Math.round(a / 10) % 2 === 0) {
                ctx.strokeStyle = "#754726"
            } else {
                ctx.strokeStyle = "#42270C"
            }

            ctx.moveTo(b.points[a].x, b.points[a].y)
            ctx.lineTo(b.points[a + 1].x, b.points[a + 1].y)
            ctx.stroke()
        }

    }

    canvas.addEventListener('mousemove',function(evt){
        var rect = canvas.getBoundingClientRect()
        joint.points[joint.points.length - 1] = new Vector2(evt.clientX - rect.left, evt.clientY - rect.top)
        joint.updatePointsPosition(joint.points[joint.points.length - 1], joint.points.length - 1)
        drawJoint(joint)
    },false)

    drawJoint(joint)

</script>